<template>
	<view class="content">
		<view class="sheet" :class="{sheetShow:isShowBottom,sheeHide:!isShowBottom}"    @click="closeSheet()">
			<view class="top-cnt flexbox flexbox-middle">
				<view class="flexchild"></view>
				<image @click="close" class="close-icon" src="/static/images/login_close.png"></image>
			</view>
			<scroll-view scroll-y="true"  class="sheetView"   :class="{sheetView_active:isShowBottom}"   @click.stop="stopEvent()" >
				<view class="scroll-container">
					<view class="title f-32 flexbox flexbox-middle flexbox-center"><view class="gan"></view>签章信息<view class="gan"></view></view>
					<view class="label-text">签署人</view>
					<view class="value-text">{{data.flow_info.contractUser || '请稍等，生成中'}}</view>
					<view class="label-text">签名有效性</view>
					<view class="value-text">{{data.flow_info.verifies ? '签名有效' : '请稍等，生成中'}}</view>
					<view class="label-text">签署时间</view>
					<view class="value-text">{{data.flow_info.signDate || '请稍等，生成中'}}</view>
					<view class="label-text">证书颁发机构</view>
					<view class="value-text">{{data.flow_info.organization || '请稍等，生成中'}}</view>
					<view class="label-text">时间戳</view>
					<view class="value-text">{{data.flow_info.timeStamp || '请稍等，生成中'}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		name : "bottomSheet",
		props: {
			isShowBottom : Boolean,
			data: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		methods: {
			closeSheet(){					
				this.$emit('closeBottom');
			},
			stopEvent(){						//@click.stop防止事件冒泡
				
			},
			moveHandle(){						//不让页面滚动
				
			}
		}
	}
</script>

<style>
	.title {
		margin: 12rpx 0 46rpx 0;
		font-weight: bold;
	}
	.title .gan {
		width: 24rpx;
		height: 4rpx;
		margin: 0 6rpx;
		font-weight: bold;
		background-color: #333333;
		border-radius: 4rpx;
	}
	.top-cnt{
		position: absolute;
		bottom: 921rpx;
		z-index: 10005;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		padding-top: 20rpx;
		width: 100%;
	}
	/* sheet弹窗 */
	.sheet{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 120%;
		left: 0;
		bottom: 0;
		right: 0;
		background:rgba(0,0,0,0.3);
		z-index: 10000;
	}
	.label-text {
		margin-bottom: 16rpx;
		font-size: 30rpx;
		font-weight: bold;
		
	}
	.close-icon {
		width: 48rpx;
		    height: 48rpx;
		    margin-right: 40rpx
	}
	.value-text {
		margin-bottom: 32rpx;
		color: #999999;
		line-height: 36rpx;
	}
	.scroll-container {
		padding:0 60rpx 20rpx 60rpx;
		font-size: 26rpx;	
	}
	
	/* 显示时候的动画默认0.5s */
	.sheetView{
		width: 100%;
		height: 0;
		position: absolute;
		bottom: 0;
		background: white;
		z-index: 10001;
		transition: all 0.5s;
		border-radius: 50rpx 50rpx 0 0;
		padding-top: 60rpx;
	}
	.sheetShow{
		top:0 !important;
	}
	/* 关闭时的动画，时间自己可以设置0.5s*/
	.sheeHide{
		top:120% !important;
		transition: all 0.5s;		
	}
	
	/* 项目需求根据设计稿要展示的高度,超出这个高度就自动滚动*/
	.sheetView_active{
		height: 942rpx;
	}
	
</style>
